<template>
  <div class="hezi">
    <div class="annius">
      <el-button type="primary" icon="el-icon-plus" @click="xinjian">新建</el-button>
      <el-button icon="el-icon-minus" @click="shanc">删除</el-button>
      <el-button type="primary" @click="shaxin">刷新</el-button>
      <el-button type="primary" class="anniu-a" @click="daoru">导入物料</el-button>
    </div>
    <el-dialog :visible.sync="xiazai">
      <el-button type="primary" @click="shangchuan"><input ref="excel-upload-input" type="file" accept=".xlsx, .xls" @change="shangc"></el-button>
      <el-button type="primary" @click="xiazaimoban">下载模板表</el-button>
    </el-dialog>
    <div class="annius xiala">
      <el-select v-model="form.MaterialTypeId" :placeholder="'物料类型'" class="leixing">
        <el-option :label="label" value="1" class="xialas">
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClicks" />
        </el-option>
      </el-select>
      <el-input v-model="searchValue" placeholder="客户编号或名称" class="bianhao" />
      <el-button type="primary" style="margin-left: 10px;" @click="chaxun">查询</el-button>
      <el-button @click="chongzhi">重置</el-button>
    </div>
    <div class="biaoge">
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="list"
        border
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="物料名称"
          width="150"
        >
          <template slot-scope="scope">{{ scope.row.Name }}</template>
        </el-table-column>
        <el-table-column
          prop="Name"
          label="物料编码"
          width="150"
        >
          <template v-slot="{row}">{{ row.Code }} </template>
        </el-table-column>
        <el-table-column
          prop="Type"
          label="物料简称"
          show-overflow-tooltip
          width="150"
        ><template v-slot="{row}">{{ row.SimpleName }} </template></el-table-column>
        <el-table-column
          prop="Phone"
          label="物料类别"
          show-overflow-tooltip
          width="150"
        ><template v-slot="{row}">{{ row.MaterialType.Name }} </template></el-table-column>
        <el-table-column
          prop="Fax"
          label="条码"
          show-overflow-tooltip
          width="150"
        ><template v-slot="{row}">{{ row.BarCode }} </template></el-table-column>
        <el-table-column
          prop="Email"
          label="物料规格"
          show-overflow-tooltip
          width="150"
        ><template v-slot="{row}">{{ row.Spec }} </template></el-table-column>
        <el-table-column
          prop="Email"
          label="单位"
          show-overflow-tooltip
          width="100"
        ><template v-slot="{row}">{{ row.Measure.Name }} </template></el-table-column>
        <el-table-column
          prop="Email"
          label="上限数量"
          show-overflow-tooltip
          width="150"
        ><template v-slot="{row}">{{ row.Max }} </template></el-table-column>
        <el-table-column
          prop="Email"
          label="下限数量"
          show-overflow-tooltip
          width="150"
        ><template v-slot="{row}">{{ row.Min }} </template></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="open(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table></div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" class="tan">
      <div class="tanchuangz">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="名称">
            <el-input v-model="form.Name" />
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="form.Code" autocomplete="off" plain disabled />
          </el-form-item>
          <el-form-item label="物料类型">
            <el-select v-model="form.MaterialTypeId" placeholder="物料类型" class="leixing">
              <el-option :label="labels" value="data" class="xialas">
                <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClicks" />
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下限">
            <el-input v-model="form.Min" type="number" />
          </el-form-item>
          <el-form-item label="单价">
            <el-input v-model="form.Price" type="number" />
          </el-form-item>
          <el-form-item label="客户">
            <el-select v-model="form.Type" placeholder="客户/投料点">
              <el-option v-for="item in touliaodian" :key="item.id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库">
            <el-select v-model="form.StorId" placeholder="请选择仓库">
              <el-option v-for="item in cangku" :key="item.id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="tanchuangy">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-form-item label="简称">
            <el-input v-model="form.SimpleName" />
          </el-form-item>
          <el-form-item label="条码">
            <el-input v-model="form.BarCode" />
          </el-form-item>
          <el-form-item label="规格">
            <el-input v-model="form.Spec" />
          </el-form-item>
          <el-form-item label="上限">
            <el-input v-model="form.Max" type="number" />
          </el-form-item>
          <el-form-item label="单位">
            <el-select v-model="form.MeasureId" placeholder="单位">
              <el-option v-for="item in danwei" :key="item.id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select v-model="form.SupId" placeholder="供应商/下料点">
              <el-option v-for="item in gongys" :key="item.id" :label="item.Name" :value="item.Id" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="beizhu">
        <el-form>
          <el-form-item label="备注">
            <el-input v-model="form.Remarks" type="textarea" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="anniu">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="xinzeng">确 定</el-button>
        <!-- <el-button v-else type="primary" @click="xiugai">修 改</el-button> -->
      </div>
    </el-dialog>
  </div></template>
<script>
import { shangExcel, ExportToExcel, gatList, SaveData, GetTreeDataList, GetStorage, QueryAllData, QueryDataList, kehu, shanchu, GetTheData } from '@/api/wuliaoguanli'
import FileSaver from 'file-saver'
export default {
  name: 'KehuManage',
  data() {
    return {
      label: '',
      labels: '',
      data: [{
        Text: '',
        Children: [{
          Text: '',
          Children: [{
            Text: ''
          }]
        }]
      }],
      defaultProps: {
        Children: 'Children',
        label: 'Text'
      },
      currentPage: 1, // 初始页
      total: 5, // 分页总条数
      pageSize: 10, // 每页的数据
      value: '1',
      drawer: false,
      direction: 'rtl',
      list: [],
      select: {},
      input: '',
      www: '',
      loading: false,
      dialogTitle: '',
      xialakuang: '',
      xiazai: false,
      form: {
        SupId: '',
        BarCode: '',
        Min: '',
        Max: '',
        Remarks: '',
        SimpleName: '',
        Spec: '',
        MeasureId: '',
        MaterialTypeId: '',
        Name: '',
        StorId: '',
        Price: ''
      },
      gongys: [],
      cangku: [],
      touliaodian: [],
      searchValue: '',
      dialogFormVisible: false,
      multipleSelection: '',
      danwei: [],
      rules: {
        Name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        Type: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      shanchus: [],
      arr: []
    }
  },
  async created() {
    this.listget()
    this.hekutoudian()
    this.shuxing()
    this.gongyingshang()
    const res = await GetStorage()
    this.cangku = res
    console.log(res, 'cangku')
    const ress = await QueryAllData()
    this.danwei = ress
    console.log(ress, 'danwei')
  },
  methods: {
    async handleClick(row) {
      this.dialogFormVisible = true
      const form = await GetTheData({ id: row.Id })
      console.log(form)
      this.form = form
    },
    async shuxing() {
      const res = await GetTreeDataList(...this.list)
      this.data = res
      console.log(this.data, '树形')
    },
    handleNodeClick(data) {
      console.log(data.ParentId, 123)
      this.form.MaterialType.ParentId = data.ParentId
      this.label = data.Text
    },
    handleNodeClicks(data) {
      console.log(data.value, 8888888)
      this.form.MaterialTypeId = data.value
      this.labels = data.Text
    },
    async xinzeng() {
      console.log(this.forms)
      await SaveData(this.form)
      this.$message({
        type: 'success',
        message: '添加成功!'
      })
      this.dialogFormVisible = false
      this.listget()
    },
    xinjian() {
      this.dialogFormVisible = true
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          if (val[i].Id !== this.arr[i]) {
            this.arr.push(val[i].Id)
          }
        }
      } else {
        this.arr = val
      }
    },
    async shanc() {
      await shanchu(this.arr)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.listget()
    },
    async listget() {
      const res = await gatList({ PageIndex: 1, PageRows: 10, search: {}, SortField: 'id', SortType: 'asc' })
      this.list = res
      console.log(res, '数据列表')
    },
    async gongyingshang() {
      const res = await QueryDataList({ PageIndex: 1, PageRows: 10, search: {}, SortField: 'id', SortType: 'asc' })
      this.gongys = res
      console.log(this.gongys, '供应商')
    },
    async hekutoudian() {
      const res = await kehu({ PageIndex: 1, PageRows: 10, search: {}, SortField: 'id', SortType: 'asc' })
      this.touliaodian = res
      console.log(this.touliaodian, 'kehu')
    },
    async open(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await shanchu([row.Id])
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.listget()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    shaxin() {
      this.loading = true
      this.listget()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    chongzhi() {
      this.searchValue = ''
      this.form.MaterialTypeId = ''
      this.listget()
    },
    async chaxun() {
      const res = await gatList({ PageIndex: 1, PageRows: 10, search: { Keyword: this.searchValue, TypeId: this.form.MaterialTypeId }})
      this.list = res
      this.$message({
        type: 'success',
        message: '查询成功!'
      })
    },
    daoru() {
      this.xiazai = true
    },
    shangchuan() {
      this.$refs['excel-upload-input'].click()
    },
    async xiazaimoban() {
      const res = await ExportToExcel()
      FileSaver.saveAs(res, '模板.xlsx')
    },
    async shangc(event) {
      const files = event.target.files
      if (files.length > 0) {
        const data = new FormData()
        files[0]
        data.append('file', files[0])
        await shangExcel(data)
      }
    }
  }
}
</script>
<style scoped>
.annius{
  margin-left: 30px;
  margin-top: 20px;
}
.anniu{
  position: relative;
  top: -400px;
  left: 0px;
}
.tan{
  height: 900px;
}
.beizhu{
  position: relative;
  top: -400px;
  left: 0px;
}
.tanchuangy{
  width: 450px;
  position: relative;
  top: -436px;
  left: 450px;
}
.tanchuangz{
  width: 450px;
}
.yeshu{
  margin-left: 1200px;
  margin-top: 20px;
}
.biaoge{
  margin-left: 30px;
  margin-top: 20px;
  width: 1590px;
}
.biaoges{
  margin-left: 30px;
  margin-top: 20px;
  width: 1200px;
}
.bianhao{
  width: 250px;
  margin-left: 10px;
}
.hezi {
  width: 1650px;
  margin: 20px auto;
  background: rgb(255, 255, 255);
}
.anniu {
  margin-left: 30px;
  margin-top: 20px;
}
.xiala {
  margin-top: 40px;
}
.anniu-a {
  margin-left: 1100px;
  margin-top: 20px;
}
.leixing{
  width: 250px;
}
.xialas{
  height: auto;
}
</style>
